<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { LOGIN_API } from '../apis/login'
import { showMsg } from '../utils/showMsg'
const router = useRouter()
const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: '' }
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}
const formRef = ref(null)

const isAgree = ref(true)
const generateRandomFourDigits = () => Math.floor(1000 + Math.random() * 9000)
const code = generateRandomFourDigits()

const formData = ref({
  username: 'admin',
  password: '123456',
  code: code
})
const handleReset = () => {
  formData.value = { username: '', password: '', code: '' }
  showMsg('重置成功', 'success')
}
const handleRegister = () => router.push('/register')
const token = ref('')
const handleLogin = async () => {
  if (isAgree.value === false) showMsg('请勾选同意', 'warning')
  if (formData.value.code != code) showMsg('验证码错误', 'warning')
  if (isAgree.value && formData.value.code == code) {
    await formRef.value.validate(valid => {
      if (valid) {
        LOGIN_API(formData.value).then(res => {
          token.value = res.data.token
          localStorage.setItem('token', token.value)
          showMsg('登录成功', 'success')
          router.push('/')
        })
      } else {
        showMsg('请完善信息', 'warning')
      }
    })
  }
}
</script>
<template>
  <div class="container">
    <div class="main">
      <div class="left"></div>
      <div class="right">
        <div class="title">
          <p>系统登录</p>
        </div>
        <div class="form">
          <el-form :rules="rules" :model="formData" ref="formRef">
            <el-form-item prop="username"><el-icon>
                <User />
              </el-icon><el-input placeholder="请输入账号" v-model="formData.username" /></el-form-item>
            <el-form-item prop="password"><el-icon>
                <Check />
              </el-icon><el-input placeholder="请输入密码" v-model="formData.password" type="password" show-password /></el-form-item>
            <div class="code">
              <el-form-item style="margin-bottom: 0;" prop="code"><el-input style="width: 100px;flex: 1;margin-left: 23px;" placeholder="验证码" class="code-input" v-model="formData.code"></el-input></el-form-item>
              <div style="flex: 1;">{{ code }}</div>
            </div>
            <div class="agree">
              <el-checkbox label="同意协议" style="margin-top: 20px;" v-model="isAgree"></el-checkbox>
            </div>
            <div class="btn">
              <el-button type="success" @click="handleLogin">登录</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
        <div class="bottom">
          <p class="register-p">还没有账号?点击这里<span class="register" @click="handleRegister">注册</span>吧</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;

  /* background-color: bisque; */

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  background-image: url('src/assets/star2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.main {
  width: 50%;
  height: 50%;
  background-color: #f4f4f4;
  display: flex;
}
.left {
  flex: 1;
  background-color: green;
  background-image: url('src/assets/login-main-left.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.right {
  flex: 1;
}
.title {
  text-align: center;
  font-size: 30px;
}
.el-form-item {
  margin-bottom: 20px;
}
.form {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  display: flex;
  justify-content: space-around;
}
.el-button {
  width: 140px;
  margin-top: 20px;
}
.el-input {
  width: 300px;
  height: 34px;
}
.el-icon {
  font-size: 24px;
}
.register-p {
  float: right;
  margin-top: 50px;
  font-size: 16px;
  margin-right: 10px;
}
.register {
  color: #409eff;
  cursor: pointer;
}
.bottom {
  position: absolute;
  top: 640px;
  left: 1200px;
}
.code {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>